<template>
  <div class="app-container">
    <el-transfer
      style="text-align: left; display: inline-block;"
      v-model="selected"
      filterable
      :titles="['表定义', '已选择']"
      :button-texts="['移除', '添加']"
      :props="{ key: 'formKey', label: 'formTitle' }"
      @change="handleChange"
      :data="formDefList">
      <span slot-scope="{ option }">{{ option.formTitle }}</span>
    </el-transfer>
  </div>
</template>

<script>

    import {listDef} from "@/api/openform/generator";
    import {
        deleteUserTableSetting,
        getUserTableSettings,
        saveUserTableSetting
    } from "@/api/renshi/person/userTableSetting";

    export default {
        data() {
            return {
                formDefList: [],
                userTableList: [],
                selected: [],
            };
        },
        created() {
            this.initFormDef();
        },
        methods: {
            initFormDef() {
                listDef({pageNum: 1, pageSize: 99999}).then(res => {
                    if(!res || !res.success) {
                        this.$message.warning("暂无可用表");
                        return;
                    }
                    this.formDefList = res.rows;
                    getUserTableSettings({pageNum: 1, pageSize: 99999}).then(response => {
                        this.userTableList = response.rows;
                        this.selected = []
                        if(this.userTableList && this.userTableList.length>0) {
                            this.userTableList.forEach(t => {
                                this.formDefList.forEach(formDef => {
                                    formDef.disabled=formDef.disabled || (formDef.formKey==t.formDefKey);
                                })
                                this.selected.push(t.formDefKey);
                            })
                        }
                    });
                });
            },
            handleChange(currentVal, forward, selectVal) {
              if('left'==forward){//向左表示删除
                  deleteUserTableSetting(selectVal.toString());
              }else if('right'==forward){//向右表示增加
                  let arr = [];
                  selectVal.forEach(item => {
                      this.formDefList.forEach(formDef => {
                          if(formDef.formKey==item) {
                              arr.push({
                                  formDefKey: formDef.formKey,
                                  formDefName: formDef.formTitle,
                                  oneToMore: false,//默认不是一对多
                              });
                          }
                      })
                  });
                  saveUserTableSetting(arr)
              }
            }
        }
    };
</script>
<style>
</style>
